<template>
  <div>
    <h5>评分组件的开发</h5>
    <!-- vue指令而言，只有第一个:表示为指令提供参数,后续所有的:都没有特殊意义，只是普通的字符串名称 -->
    <RateSource
      :source="source1"
      v-on:update:source="source1 = $event"
    ></RateSource>
    <RateSource
      :size="20"
      :source="source2"
      @update:source="source2 = $event"
    ></RateSource>
    <!-- 
      下述的.sync修饰符主要就是同时完成上述代码的 属性绑定和事件绑定 
      例如 v-bind:source.sync = "source3"
      等同  第一步   v-bind:source="source3"
            第二步  v-on:update:source="source3=$event"
      
      注意的特性：.sync 补充的事件名的格式为 update:属性名
    -->
    <RateSource v-bind:source.sync="source3" :size="30"></RateSource>
    <RateSource :source.sync="source4" :size="40"></RateSource>
  </div>
</template>
<script>
import RateSource from "./RateSource.vue";
export default {
  components: {
    RateSource,
  },
  data() {
    return {
      msg: "",
      source1: 5,
      source2: 3,
      source3: 0,
      source4: 1,
    };
  },
};
</script>
